<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页</title>

    <!--引入公共js-->
    <script src="common.js"></script>
</head>

<body>
<div id="indexApp">
    <!-- 顶部导航栏 -->
    <el-menu :default-active="this.$route.path" router mode="horizontal" @select="handleSelect"
             background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="/home" style="margin-left: 5%;">首页</el-menu-item>
        <el-submenu index="/myWork">
            <template slot="title">我的工作台</template>
            <el-menu-item index="/testCenter">功能测试</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="/messageCenter">消息中心</el-menu-item>
        <el-menu-item style="float: right;margin-right: 5%;">
            <el-link @click="logout()">登出</el-link>
        </el-menu-item>
        <el-menu-item index="/personalCenter" style="float: right;">[ {{userInfo.userName}} ]</el-menu-item>
    </el-menu>

    <!-- 路由出口，点击路由的入口后，会在这里渲染出组件 -->
    <router-view></router-view>

    <!--footer组件-->
    <footer-bar></footer-bar>

    <!--返回顶部-->
    <el-backtop></el-backtop>
</div>

<script src="pages/index.js"></script>
</body>

</html>